<template>
    <div>
        <el-row>
            <el-col :span="6" >
                <el-input v-model="input" placeholder="姓名" prefix-icon="el-icon-search"></el-input>
            </el-col>
            <el-col :span="3">
                <el-button type="primary" plain>查询</el-button>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 98%">
            <el-table-column prop="name" label="姓名" width="150"></el-table-column>
            <el-table-column prop="age" label="年龄" width="150" align="center"></el-table-column>
            <el-table-column prop="gender" label="性别" width="280" align="center"></el-table-column>
            <el-table-column prop="address" label="住址" width="280"></el-table-column>
            <el-table-column prop="date" label="治愈日期" width="180" align="center">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="operation" label="操作" align="center" >
                <el-button plain size="mini"  @click="showDetails()">详情</el-button>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[3,100, 200, 300, 400]"
            :page-size="3"
            layout="total, sizes, prev, pager, next, jumper"
            :total="2">
        </el-pagination>
        <el-dialog title="详细信息" :visible.sync="dialogFormVisible" width="1300px">
            <el-form :model="form" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="name" >
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="gender" >
                            <el-input v-model="form.gender"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="身份证号">
                            <el-input v-model="form.idcard"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年龄">
                            <el-input v-model="form.age"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="电话号码" prop="phone">
                            <el-input v-model="form.phone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="住院时间" >
                            <el-col>
                                <el-form-item prop="in_date">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="form.in_date" style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="治疗医院" prop="hospital">
                            <el-input v-model="form.hospital"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="感染来源" prop="source">
                            <el-input v-model="form.source"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="住址">
                            <el-input v-model="form.address"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="出院时间" >
                            <el-col>
                                <el-form-item prop="out_date">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="form.out_date" style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="form.desc" rows="4"></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" >关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import request from '@/utils/request'

export default {
  data() {
    return {
        input: '',
        tableData: null,
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        dialogFormVisible: false,
        form: {
          name: '',
          gender:'',  
          idcard:'',
          age:'',
          phone:'',
          in_date: '',
          hospital:'',
          source:'',
          address:'',
          out_date: '',
          desc: '',
        },
        formLabelWidth: '120px'
        
    }
  },
  created(){
      this.fetchData()
  },
  methods:{
      fetchData(){
          request({
                url: '../cure_list.json',
                method: 'get',
            }).then(response => {
                this.tableData = response.data
            })
        },
      handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
      handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
    //   showByid(){
    //       this.$router.push({
    //           path:'/management/fixPatient',
    //       })
    //   },
        showDetails(){

            this.dialogFormVisible = true

            request({
                url: '../cure_info.json',
                method: 'get',
            }).then(response => {
                console.log(response.data)
                this.form = response.data
            })
        },
    }
}
</script>